<template>
  <div>
    <h1>客户管理</h1>
    <el-table :data="clients" style="width: 100%" max-height="500">
      <el-table-column fixed prop="account" label="账号" width="180"></el-table-column>
      <el-table-column prop="nickName" label="昵称" width="180"></el-table-column>
      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.gender=='1'">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column label="是否为推广来源" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.isPopularize}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="belongAdminId.account"
        label="所属销售人员"
        width="200"
        sortable
        :sort-by="['belongAdminId.account']"
      ></el-table-column>

      <el-table-column fixed="right" label="查看订单" width="150">
        <template slot-scope="scope">
          <el-button
            type="info"
            size="small"
            @click="toinsureorder(scope.row._id)"
          >查看订单</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="移除" width="150">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row._id)"
            type="text"
            size="small"
          >移除</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="修改" width="150">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="changeRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="formData.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <!-- <el-input v-model="formData.gender" autocomplete="off"></el-input> -->
          <el-radio v-model="formData.gender" label="1">男</el-radio>
          <el-radio v-model="formData.gender" label="2">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upclient()">确 定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>
  
<script>
export default {
  methods: {
    deleteRow(index, _id) {
      this.$apis.clients.delClients(_id);
      this.getAllClients();
    },
    changeRow(index, client) {
      this.formData = { ...client, gender: client.gender + "" };
      this.dialogFormVisible = true;
    },
    async upclient() {
      const { data } = await this.$apis.clients.modMyClient(this.form);
      this.getAllClients();
      this.dialogFormVisible = false;
    },
    async getAllClients() {
      const _id = sessionStorage.admin_id
      const { data } = await this.$apis.clients.getClients();
      const newdata = data.clients.filter(element => {
        if(element.belongAdminId._id===_id)return element
      });
      console.log(newdata)
      if (data.status == "1") {
        this.clients = newdata;
      } else {
        console.log(data.msg);
      }
    },
    toinsureorder(_id){
      this.$router.push({
        path:`/system/claimOrder/getCompensations/${_id}`
      })
      
    }
  },
  created() {
    this.getAllClients();
  },
  data() {
    return {
      clients: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formData: {
        account: "",
        nickName: "",
        gender: "",
        password: "",
      },
      formLabelWidth: "120px",
    };
  },
  
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/sector.scss";
</style>